<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
       <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
       <link rel="stylesheet" type="text/css" href="./css/common.css"/>
	   <link rel="stylesheet" type="text/css" href="./Swiper-3.4.2/dist/css/swiper.min.css"/>
       <link rel="stylesheet" type="text/css" href="./css/index.css"/>
       <script src="./js/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script>
       <script src="./js/jquery.tmpl.js" type="text/javascript" charset="utf-8"></script>
      <script src="./Swiper-3.4.2/dist/js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
       <title>小米商城</title>
       <script type="text/javascript">
       	// 1rem = 100px
       	// 1px = 0.01rem
       	(function (doc, win, undefined) {
       	            var docEl = doc.documentElement,
       	              resizeEvt = 'orientationchange' in win? 'orientationchange' : 'resize',
       	              recalc = function () {
       	                var clientWidth = docEl.clientWidth;
       	                if (clientWidth === undefined) return;
       	                //以ip5为基准  
       	                docEl.style.fontSize =(clientWidth*100) / 375 + 'px';
       	             };
       	           if (doc.addEventListener === undefined) return;
       	         win.addEventListener(resizeEvt, recalc, false);
       	           doc.addEventListener('DOMContentLoaded', recalc, false)
       	         })(document, window);
       </script>
</head>
<body>
	
	<div id="header">
		<ul>
			<li>
				<img src="./images/mi%20(93).jpg" />
			</li>
			<li>
				<input type="text" name="search" id="search" placeholder="搜索商品名称" />
			</li>
			<li>
				<img src="./images/mi%20(78).jpg" />
			</li>
		</ul>
	</div>
	
	<div id="container">
		<!-- Swiper -->
		<div class="swiper-container">
		    <div class="swiper-wrapper" id="imgListData">
				<div class="swiper-slide">
					<img src="images/mi (6).jpg" />
				</div>
				<div class="swiper-slide">
					<img src="images/mi (28).jpg" />
				</div>
				<div class="swiper-slide">
					<img src="images/mi (51).jpg" />
				</div>
		    </div>
		    <div class="swiper-pagination"></div>
		</div>
		
		<!-- Initialize Swiper -->
		<script>
			var swiper = new Swiper('.swiper-container', {
				pagination: '.swiper-pagination',
				slidesPerView: 1,
				autoplay:2000,
				paginationClickable: true,
				spaceBetween: 30,
				loop: true
			});
		</script>
	
		<ul class="navList">
			<li>
				<div class="navList-icon">
					<img src="./images/mi%20(56).jpg" />
				</div>
			</li>
			<li>
				<div class="navList-icon">
					<img src="./images/mi%20(36).jpg" />
				</div>
			</li>
			<li>
				<div class="navList-icon">
					<img src="./images/mi%20(21).jpg" />
				</div>
			</li>
			<li>
				<div class="navList-icon">
					<img src="./images/mi%20(30).jpg" />
				</div>
				
			</li>
			<li>
				<div class="navList-icon">
					<img src="./images/mi%20(33).jpg" />
				</div>
				
			</li>
			<li>
				<div class="navList-icon">
					<img src="./images/mi%20(9).jpg" />
				</div>
			
			</li>
			<li>
				<div class="navList-icon">
					<img src="./images/mi%20(20).jpg" />
				</div>
				
			</li>
			<li>
				<div class="navList-icon">
					<img src="./images/mi%20(26).jpg" />
				</div>
				
			</li>
			<li>
				<div class="navList-icon">
					<img src="./images/mi%20(18).jpg" />
				</div>
				
			</li>
			<li>
				<div class="navList-icon">
					<img src="./images/mi%20(63).jpg" />
				</div>
				
			</li>
		</ul>
	
		<div class="middle">
			<div class="middle-left">
				<img src="./images/mi%20(24).jpg" />
			</div>
			<div class="middle-right">
				<img src="./images/mi%20(3).jpg" />
				<img src="./images/mi%20(27).jpg" />
			</div>
		</div>
	</div>

	<div id="footer">
		<ul>
			<li>
				<div>
					<img src="./images/mi%20(72).jpg" />
				</div>
				<p>首页</p>
			</li>
			<li>
				<div>
					<img src="./images/mi%20(69).jpg" />
				</div>
				<p>分类</p>
			</li>
			<li>
				<div>
					<img src="./images/mi%20(75).jpg" />
				</div>
				<p>星球</p>
			</li>
			<li>
				<div>
					<img src="./images/mi%20(66).jpg" />
				</div>
				<p>购物车</p>
			</li>
			<li>
				<div>
					<img src="./images/mi%20(78).jpg" />
				</div>
				<p>我的</p>
			</li>
		</ul>
	</div>
</body>
<script type="text/javascript">
		for(let i=0;i<$("#footer ul li").length;i++){
			$("#footer ul li").eq(i).click(function(){
				switch (i){
					case 0:
						window.location.href = "index.html"
						break;
					case 1:
						window.location.href = "category.html"
						break;
					case 2:
						window.location.href = "planet.html"
						break;
					case 3:
						window.location.href = "shopcar.html"
						break;
					case 4:
						window.location.href = "mine.html"
						break;
					default:
						break;
				}
			})
		}
		
	</script>
</html>
